<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="title">
                    <h2>已完成</h2>

                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/history/myjoin' }">所有项</el-breadcrumb-item>
                        <el-breadcrumb-item><router-link to="#/history/finished">已完成</router-link></el-breadcrumb-item>

                    </el-breadcrumb>
                </div>



            </el-header>
            <el-main>
                <TaskCard  :tasklist="state.taskList"></TaskCard>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import  {onMounted, reactive}  from 'vue';
import TaskCard from '../../../components/TaskCard.vue'
import requestMethods from '../../../api/api'
import ElNotification from 'element-plus'
const state = reactive({
    taskList:{}
})

requestMethods.getTargetTask('finished').then(res => {
    console.log(res);
    state.taskList = res.data.tasklist
    console.log(state.taskList);
}).catch(error => {
    ElNotification({
        type:'error',
        message:error
    })
})
    onMounted(()=> {
        console.log('Doing')
    })

</script>

<style scoped lang="less">
.el-container {

    --el-header-height: auto;

    .el-header {





        .title {

            display: flex;
            justify-content: flex-start;

            align-items: center;

            h2 {

                border: 0;
                font-size: 30px;
                line-height: 40px;
            }

            .el-breadcrumb {
                padding-left: 20px;

            }
        }

    }

    .el-main {
        margin: 0;
        margin-top: 20px;
        height: 82vh;
        background-color: #ffff;
        border-radius: 25px 0px 0 0;
    }
}

::-webkit-scrollbar {
    width: 10px;

    background: #F5F7FA;
    /*可以设置轨道颜色*/
    padding-right: 2px;
}

/*滚动条*/
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
</style>